<!-- 材料编辑弹窗 -->
<template>
  <a-card :bordered="false">
    <a-form
      ref="form2"
      :model="materialModalApp.material"
      :rules="materialModalApp.rules"
      :label-col="{md: {span: 7}, sm: {span: 24}}"
      :wrapper-col="{md: {span: 17}, sm: {span: 24}}">
      <a-row :gutter="16">

        <a-col :lg="24" :md="12" :sm="24" :xs="24">
          <a-form-item label="材料类别:" name="materialCategoryName">
            <MDictSelect
              :disabled="!materialModalApp.display"
              v-model:value="materialModalApp.material.materialCategoryName"
              placeholder="请选择材料类别"
              dict="材料类别"/>
          </a-form-item>
        </a-col>

<!--        <a-col :lg="24" :md="12" :sm="24" :xs="24">
          <a-form-item label="材料统计单位:" name="materialCategoryName">
            <MDictSelect
              v-model:value="materialModalApp.material.weightUnit"
              placeholder="请选择材料统计单位"
              dict="数量单位"/>
          </a-form-item>
        </a-col>-->

        <a-col :lg="24" :md="12" :sm="24" :xs="24">
          <a-form-item label="材料名称:" name="name">
            <a-input
              :disabled="!materialModalApp.display"
              v-model:value="materialModalApp.material.name"
              placeholder="请输入材料名称"
              :min="0"
              :step="1"
              class="ele-fluid">
            </a-input>
          </a-form-item>
        </a-col>

        <a-col :lg="24" :md="12" :sm="24" :xs="24">
          <a-form-item label="材料最高价格:" name="maxPrice">
            <a-input
              :disabled="!materialModalApp.display"
              v-model:value="materialModalApp.material.maxPrice"
              placeholder="请输入材料最高价格"
              :min="0"
              :step="1"
              class="ele-fluid">
            </a-input>
          </a-form-item>
        </a-col>

        <a-col :lg="24" :md="12" :sm="24" :xs="24">
          <a-form-item label="备注:" name="materialCategoryId">
            <a-textarea
              :disabled="!materialModalApp.display"
              v-model:value="materialModalApp.material.remark"
              placeholder="请输入备注"
              :auto-size="{ minRows: 3, maxRows: 3}"
              class="ele-fluid">
            </a-textarea>
          </a-form-item>
        </a-col>
      </a-row>


      <a-col :md="12" :sm="24" :xs="24">
        <a-form-item :wrapper-col="{md: {offset: 6}}" style="margin-bottom: -20px">
          <!--class="ele-pull-right"-->
            <teleport to="#materialEditModalFooter">
              <div>
                <a-space size="middle">
                  <a-button @click="materialListApp.modalShowing=false">取消
                  </a-button>
                  <a-button
                    v-if="materialModalApp.display"
                    type="primary"
                    @click="onSubmit(materialModalApp.material)"
                    :loading="loading">提交
                  </a-button>
                </a-space>
              </div>
            </teleport>

        </a-form-item>
      </a-col>
    </a-form>
  </a-card>

</template>

<script>
import {defineComponent, inject, reactive, onMounted, toRefs,ref} from 'vue'
import {useRoute} from "vue-router"
import {MaterialService} from "@/views/restaurant/material/material/materialService";
import {VXETable} from 'vxe-table'
// import {useStore} from "vuex";
import regions from 'ele-admin-pro/packages/regions.js';
import MDictSelect from "@/components/MDict/dictSelect";


export default defineComponent({
  components: {

    MDictSelect
  },
  props: {
    editId: String
  },
  setup(props) {
    // 省市区数据
    const businessId = toRefs(props).editId.value
    console.log(businessId)
    const cityData = regions
    const route = useRoute();
    const form2 = ref(null);
    // const router = useRouter();
    // const store = useStore();
    let routeId = route.params.id;
    let materialListApp = inject('materialListApp', reactive({}));
    let materialGrid = inject('materialGrid', reactive({}));
    let gridOptions = inject('gridOptions', reactive({}));
    const materialModalApp = reactive({
      id: null,
      material: {},
      isEdit: false,
      display: false
    });
    materialModalApp.rules = {
      materialCategoryName: [
        {
          required: true,
          type: 'string',
          message: '请选择材料类别',
          trigger: 'blur'
        }
      ],
      name: [
        {
          required: true,
          type: 'string',
          message: '请输入材料名称',
          trigger: 'blur'
        }
      ],
      maxPrice: [
        {
          required: true,
          type: 'number',
          message: '请输入材料价格',
          trigger: 'blur'
        }
      ],
    }

    onMounted(() => {
      //清理数据
      materialModalApp.material = reactive({});
      if (routeId) {//路由
        materialModalApp.id = routeId;
        materialModalApp.display = false;
        findMaterial(materialModalApp.id);
      } else if (materialListApp.editModalForEdit) {//修改弹窗
        materialModalApp.id = materialListApp.currentId;
        materialModalApp.display = true;
      } else if (!materialListApp.editModalForEdit && materialListApp.addModalForEdit) {//新增弹窗
        materialModalApp.display = true;
      } else if(!materialListApp.editModalForEdit && !materialListApp.addModalForEdit && materialListApp.showModalForEdit){
        materialModalApp.id = materialListApp.currentId;
        materialModalApp.display = false;
      }
      if (materialModalApp.id) findMaterial(materialModalApp.id);
    })

    const findMaterial = (id) => {
      MaterialService.findMaterialForView(id).then((res) => {
        materialModalApp.material = res.data;
      }).catch(error => {
        VXETable.modal.message({content: `查找学生出错，原因是：${error.message}`, status: 'error'});
      })
    }

    /*TODO:提交 新增&编辑*/
    const onSubmit = (data) => {
      // debugger;
      //当为数组时用逗号连接
      form2.value.validate().then(()=>{
        if (data.eid) {
          //修改
          MaterialService.updateMaterial(data).then((res) => {
            console.log(res);
            VXETable.modal.message({content: '操作成功', status: 'success'});
            setTimeout(onBack, 3000);
          }).catch(error => {
            VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
          })
        } else {
          //新增
          MaterialService.saveMaterial(data).then((res) => {
            console.log(res);
            VXETable.modal.message({content: '操作成功', status: 'success'});
            setTimeout(onBack, 3000);
          }).catch(error => {
            VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
          })
        }
      })

    }

    /*TODO:返回列表*/
    const onBack = () => {
      setTimeout(() => {
        materialGrid.value.commitProxy("query");
      }, 1500);
      materialListApp.modalShowing = false;

    }
    return {
      businessId,
      cityData,
      form2,
      routeId,
      materialListApp,
      gridOptions,
      materialGrid,
      materialModalApp,
      onSubmit,
      onBack,
    }

  },
})
</script>

<style scoped>

</style>
